<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no">
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				padding: 0;
				margin: 0;
			}
			
			.wrap {
				position: relative;
				overflow: hidden;
				margin: 0 auto;
				padding: 0;
				max-width: 500px;
				max-height: 797px;
				background: black;
			}
			
			.wrap .enemy {
				position: absolute;
				width: 25px;
				height: 25px;
				background-image: url(img/enemy.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			
			.wrap .plane {
				position: absolute;
				width: 60px;
				height: 36px;
				background-image: url(img/plane.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			
			.wrap .bullet {
				position: absolute;
				width: 6px;
				height: 22px;
				background-image: url(img/bullet.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		</style>
	</head>

	<body>
		<div class="wrap">

		</div>
	</body>

</html>
<script type="text/javascript">
	(function change() {
		var oFz = document.getElementsByTagName("html")[0];
		var width = window.innerWidth;
		oFz.style.fontSize = width / 10 + "px";
		window.onresize = function() {
			change();
		};
	})();
</script>
<script type="text/javascript">
	(function() {
		var cloneObj = function(obj) {
			var str, newobj = obj.constructor === Array ? [] : {};
			if(typeof obj !== 'object') {
				return;
			} else if(window.JSON) {
				str = JSON.stringify(obj), //序列化对象
					newobj = JSON.parse(str); //还原
			} else {
				for(var i in obj) {
					newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
				}
			}
			return newobj;
		};
		window.cloneObj = cloneObj;
	})();
</script>
<script>
	window.requestAnimationFrame = window.requestAnimationFrame || function(fn) {
		return setTimeout(fn, 1000 / 60);
	};
	window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
	! function() {
		/*
		*时间版运动框架
		@param
		    obj -- object  节点对象
		    mJson -- object  要运动的属性与目标值的键值对
		    time -- number  时间数值 单位ms
		    tw -- string  选择运动曲线，Tween的属性名之一，默认值 "easeBoth"
		@return
		    undefined
		*/
		var move = (function() {
			var Tween = {
				linear: function(t, b, c, d) { //匀速
					return c * t / d + b;
				},
				easeIn: function(t, b, c, d) { //加速曲线
					return c * (t /= d) * t + b;
				},
				easeOut: function(t, b, c, d) { //减速曲线
					return -c * (t /= d) * (t - 2) + b;
				},
				easeBoth: function(t, b, c, d) { //加速减速曲线
					if((t /= d / 2) < 1) {
						return c / 2 * t * t + b;
					}
					return -c / 2 * ((--t) * (t - 2) - 1) + b;
				},
				easeInStrong: function(t, b, c, d) { //加加速曲线
					return c * (t /= d) * t * t * t + b;
				},
				easeOutStrong: function(t, b, c, d) { //减减速曲线
					return -c * ((t = t / d - 1) * t * t * t - 1) + b;
				},
				easeBothStrong: function(t, b, c, d) { //加加速减减速曲线
					if((t /= d / 2) < 1) {
						return c / 2 * t * t * t * t + b;
					}
					return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
				},
				elasticIn: function(t, b, c, d, a, p) { //正弦衰减曲线（弹动渐入）
					if(t === 0) {
						return b;
					}
					if((t /= d) === 1) {
						return b + c;
					}
					if(!p) {
						p = d * 0.3;
					}
					if(!a || a < Math.abs(c)) {
						a = c;
						var s = p / 4;
					} else {
						var s = p / (2 * Math.PI) * Math.asin(c / a);
					}
					return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
				},
				elasticOut: function(t, b, c, d, a, p) { //正弦增强曲线（弹动渐出）
					if(t === 0) {
						return b;
					}
					if((t /= d) === 1) {
						return b + c;
					}
					if(!p) {
						p = d * 0.3;
					}
					if(!a || a < Math.abs(c)) {
						a = c;
						var s = p / 4;
					} else {
						var s = p / (2 * Math.PI) * Math.asin(c / a);
					}
					return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
				},
				elasticBoth: function(t, b, c, d, a, p) {
					if(t === 0) {
						return b;
					}
					if((t /= d / 2) === 2) {
						return b + c;
					}
					if(!p) {
						p = d * (0.3 * 1.5);
					}
					if(!a || a < Math.abs(c)) {
						a = c;
						var s = p / 4;
					} else {
						var s = p / (2 * Math.PI) * Math.asin(c / a);
					}
					if(t < 1) {
						return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
							Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
					}
					return a * Math.pow(2, -10 * (t -= 1)) *
						Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
				},
				backIn: function(t, b, c, d, s) { //回退加速（回退渐入）
					if(typeof s === 'undefined') {
						s = 1.70158;
					}
					return c * (t /= d) * t * ((s + 1) * t - s) + b;
				},
				backOut: function(t, b, c, d, s) {
					if(typeof s === 'undefined') {
						s = 3.70158; //回缩的距离
					}
					return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
				},
				backBoth: function(t, b, c, d, s) {
					if(typeof s === 'undefined') {
						s = 1.70158;
					}
					if((t /= d / 2) < 1) {
						return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
					}
					return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
				},
				bounceIn: function(t, b, c, d) { //弹球减振（弹球渐出）
					return c - Tween['bounceOut'](d - t, 0, c, d) + b;
				},
				bounceOut: function(t, b, c, d) {
					if((t /= d) < (1 / 2.75)) {
						return c * (7.5625 * t * t) + b;
					} else if(t < (2 / 2.75)) {
						return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
					} else if(t < (2.5 / 2.75)) {
						return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
					}
					return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
				},
				bounceBoth: function(t, b, c, d) {
					if(t < d / 2) {
						return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
					}
					return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
				}
			};
			var noPxAttrArr = ["z-index", "opacity", "zIndex"];
			return function(obj, obj2, mJson, time, fn, tw) {
				//先决定运动曲线
				tw = tw || "easeBoth";
				//获取属性的初始值 与 总位移
				var objStyle = obj.currentStyle || getComputedStyle(obj);
				var sVal = {};
				var S = {};
				for(var attr in mJson) {
					attr = attr.toLocaleLowerCase();
					sVal[attr] = parseFloat(objStyle[attr]);
					if(attr === "opacity" && !(typeof sVal[attr] === "number")) {
						sVal[attr] = 1;
					}
					S[attr] = mJson[attr] - sVal[attr];
				}
				//得到初始时间
				var sTime = new Date();

				(function m() {
					//已经经过的时长
					var s_ = new Date() - sTime;
					if(s_ >= time) {
						s_ = time;
						//						console.log(obj);
						clearFn(obj);
					} else {
						switch(obj2.ATTR) {
							case 'air':
								obj2.X = parseFloat(obj.style.left) + 12.5;
								obj2.Y = parseFloat(obj.style.top) + 12.5;
								colliding(obj);
								break;
							case 'bullet':
								obj2.X = parseFloat(obj.style.left) + 3;
								obj2.Y = parseFloat(obj.style.top) + 11;
								break;
						}

						//																		console.log(obj.nature);
						requestAnimationFrame(m);
					}
					for(var attr in mJson) {
						var ss = Tween[tw](s_, sVal[attr], S[attr], time);
						var ifNeedPx = false;
						for(var i = 0; i < noPxAttrArr.length; i++) {
							ifNeedPx = attr === noPxAttrArr[i];
							if(ifNeedPx) {
								break;
							}
						}
						obj.style[attr] = ss + (ifNeedPx ? "" : "px");
						if(attr === "opacity") {
							obj.style["filter"] = "alpha(opacity=" + ss * 100 + ")";
						}
					}
				})();
			}
		})();
		window.moveSJ = move;
		window.clearFn = clearFn;

		function clearFn(obj) {
			obj.parentNode.removeChild(obj);
		}
	}()
</script>
<script type="text/javascript">
	var oWrap = document.getElementsByClassName('wrap')[0];
	//设置高度
	(function() {
		oWrap.style.height = window.innerHeight + 'px';
		oWrap.style.width = window.getComputedStyle(oWrap).width;
		window.onresize = function() {
			oWrap.style.height = window.innerHeight + 'px';
		};
	})()
	//飞机属性
	var Air = {
		ATTR: 'air',
		X: 0,
		Y: 0,
		HP: 1,
		MARKS: 50
	};
	//英雄机
	var Hero = {
		ATTR: 'hero',
		X: 0,
		Y: 0,
		HP: 5
	};
	//子弹
	var Bullet = {
		ATTR: 'bullet',
		X: 0,
		Y: 0
	}
	//创建敌机
	var setOne = setInterval(function() {
		//创建飞机方法
		! function createAir(obj) {
			var maxWidth = parseInt(oWrap.style.width) - 25;
			var maxHeight = parseInt(oWrap.style.height);
			var air = document.createElement("div");
			air.className = "enemy";
			air.style.top = '-25px';
			air.style.left = Math.random() * maxWidth + 'px';
			air.nature = obj;
			oWrap.appendChild(air);
			moveSJ(air, obj, {
				top: maxHeight
			}, 1500, 'easeIn');
		}(cloneObj(Air));
	}, 300);

	var setTwo = setInterval(function() {
		//给英雄机生成子弹
		! function(Bullet) {
			var Hero = document.getElementsByClassName('plane')[0];

			var bull = document.createElement("div");
			//			console.log(Hero.style.top);
			bull.className = "bullet";
			bull.style.top = parseFloat(Hero.style.top) + 18 - 30 + 'px';
			bull.style.left = parseFloat(Hero.style.left) + 30 - 3 + 'px';
			bull.nature = Bullet;
			//			//绑定事件
			//			bull.onchange = function() {
			//
			//			}

			oWrap.appendChild(bull);
			moveSJ(bull, Bullet, {
				top: -22
			}, 1000, 'linear');
		}(cloneObj(Bullet));
	}, 100);
	//创建英雄机
	! function createAir(obj) {
		var maxWidth = parseInt(oWrap.style.width) - 60;
		var maxHeight = parseInt(oWrap.style.height);
		var plane = document.createElement("div");
		plane.className = "plane";
		plane.style.top = maxHeight - 100 + 'px';
		plane.style.left = maxWidth / 2 + 'px';
		plane.nature = obj;
		(function(plane) {
			oWrap.onmousemove = function(e) {
				e = e || e.event;
				plane.style.top = e.clientY - oWrap.offsetTop - 18 + 'px';
				plane.style.left = e.clientX - oWrap.offsetLeft - 30 + 'px';
				plane.nature.Y = parseFloat(plane.style.top) + 18;
				plane.nature.X = parseFloat(plane.style.left) + 30;
				//								console.log(plane.nature);
			}
		})(plane)
		oWrap.appendChild(plane);
	}(cloneObj(Hero));
	//碰撞
	(function() {
		//子弹
		var bull = oWrap.getElementsByClassName('bullet');
		//英雄机
		var Hreo = oWrap.getElementsByClassName('plane')[0];
		//敌机
		var air = oWrap.getElementsByClassName('enemy');
		var absBX, absBY, absBZ, absAX, absAY, absAZ;
		//碰撞
		function colliding(ele) {

			if(ele.nature.ATTR === 'air') {
				//air敌机
				absAX = ele.nature.X;
				absAY = ele.nature.Y;
				//敌机直角边
				absAZ = Math.sqrt(Math.pow(parseInt(window.getComputedStyle(ele).width) / 2, 2) + (Math.pow(parseInt(window.getComputedStyle(ele).height) / 2, 2)));
				//				console.log(absAZ);
				// 遍历子弹
				for(var j = 0, len = bull.length; j < len; j++) {
					(function(j, ele) {
						absBX = j.nature.X;
						absBY = j.nature.Y;
						absBZ = Math.sqrt(Math.pow(parseInt(window.getComputedStyle(j).width) / 2, 2) + (Math.pow(parseInt(window.getComputedStyle(j).height) / 2, 2)));
						cF = Math.pow(Math.abs(absAX - absBX), 2) + Math.pow(Math.abs(absAY - absBY), 2);
						if(cF <= Math.pow((absAZ + absBZ), 2)) {
							ele.style.backgroundImage = "url(img/boom.png)";
							setTimeout(function() {
								ele.style.backgroundImage = "url(img/boom2.png)";
								setTimeout(function() {
									ele.style.backgroundImage = "url(img/boom.png)";
									setTimeout(function() {
										ele.style.display = 'none';
									}, 100);
								}, 100);
							}, 100);

							//								console.log('碰撞了');
						}
						console.log()
					})(bull[j], ele)
				}
				//针对英雄机
				! function() {
					var absBX = Hreo.nature.X;
					var absBY = Hreo.nature.Y;
					var absBZ = Math.sqrt(Math.pow(parseInt(window.getComputedStyle(Hreo).width) / 2, 2) + (Math.pow(parseInt(window.getComputedStyle(Hreo).height) / 2, 2)));
					cF = Math.pow(Math.abs(absAX - absBX), 2) + Math.pow(Math.abs(absAY - absBY), 2);
					if(cF <= Math.pow((absAZ + absBZ), 2) && ele.style.display !== 'none') {
						alert('结束');
					}
				}();
			}
		}
		window.colliding = colliding;
	})()
</script>